import React from 'react'
import * as echarts from 'echarts/core';
import { GridComponent } from 'echarts/components';
import { LineChart } from 'echarts/charts';
// import { UniversalTransition } from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers';
import { connect } from 'react-redux';
import { withRouter,Link } from 'react-router-dom';
import CurveDatePicker from '&components/datePicker'
import CollapseCard from '&components/collapseCard'
import '../index.css'

echarts.use([GridComponent, LineChart, CanvasRenderer]);
class LtLine extends React.Component {
  constructor(props){
        super(props);
        this.state={
            
        };
        // this.indicator = []
  }
  componentDidMount() {
    const data = this.props.ltOptionData
    let series=[];
    if (JSON.stringify(data) != "{}" && JSON.stringify(data) != "[]") {
      for(let i = 0;i<data.value.length;i++){
        series.push({
          type:'line',
          data:data.value[i].lt
        })
      }
    }
    var myChart = echarts.init(document.getElementById('ltLine'));
    myChart.setOption({
      title:{
        text:'壁厚损失'
      },
      xAxis: {
        type: 'category',
        data: data.time || [],
      },
      yAxis: {
        type: 'value'
      },
      series: series
    })
  }
  

  componentDidUpdate() {
    const data = this.props.ltOptionData
    // console.log(data);
    let series=[];
    if (JSON.stringify(data) != "{}"  && JSON.stringify(data) != "[]") {
      for(let i = 0;i<data.value.length;i++){
        series.push({
          type:'line',
          data:data.value[i].lt
        })
      }
    }
    console.log(series);
    var myChart = echarts.init(document.getElementById('ltLine'));
    myChart.setOption({
      title:{
        text:'壁厚损失'
      },
      xAxis: {
        type: 'category',
        data: data.time || [],
      },
      yAxis: {
        type: 'value'
      },
      series: series, 
    }, true)
    
  
  }
  


  render(){
    const { width, height } = this.props
    return (
      <div className={this.props.choice !== 'all' ? 'curveContent' : ''}>
        {this.props.choice != 'all' ? <CollapseCard choice={1}></CollapseCard> : ''}
        <div id="ltLine" style={{width: width, height: height}}>
        </div>
        <CurveDatePicker choice={1}></CurveDatePicker>
      </div>
    )
  }
}

const mapStateToProps = (state) => ({ choice:state.equipmentPage.choice,ltOptionData:state.equipmentPage.ltOptionData,width:state.equipmentPage.width,height:state.equipmentPage.height});
const mapDispatchToProps = dispatch => {
  return {
    getBackImg: dispatch.equipmentPage.getBackImg,
    getCurve: dispatch.equipmentPage.getCurve,
  }
};
export default connect(
    mapStateToProps,
    mapDispatchToProps
)(withRouter(LtLine));